<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css"  media="all">
<link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="vendors/linericon/style.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
        <link rel="stylesheet" href="vendors/lightbox/simpleLightbox.css">
        <link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
        <link rel="stylesheet" href="vendors/animate-css/animate.css">
        <!-- main css -->
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/responsive.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Elegant Feedback Form  Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //custom-theme -->
<link href="css/style_mark.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<title>评分</title>
</head>

<body class="agileits_w3layouts">
	<div id="mark">
	<header class="header_area">
            <div class="main_menu">
            	<nav class="navbar navbar-expand-lg navbar-light">
					<div class="container box_1620">
						<!-- Brand and toggle get grouped for better mobile display -->
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
							<input v-model="search" style="width:250px;background:transparent;border:none #FFFFFF;border-bottom:#777777 solid 1px;color:white;" placeholder="请输入查询电影">
							<a :href="'list.jsp?email='+user.email+'&nackname='+user.nickname+'&m_name='+search" class="search"><i class="lnr lnr-magnifier"></i></a>
							<ul class="nav navbar-nav menu_nav ml-auto">
								<li class="nav-item active"><a class="nav-link" href="index.jsp">首页</a></li> 
								<li class="nav-item"><a href="javascript:void(0);" class="nav-link" v-on:click="guess">猜你喜欢</a></li> 
								<li class="nav-item submenu dropdown">
									<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">榜单</a>
									<ul class="dropdown-menu">
										<li class="nav-item"><a class="nav-link" :href="'list.jsp?email='+user.email+'&nickname='+user.nickname+'&sortType=rateFirst'">高分榜单</a>
										<li class="nav-item"><a class="nav-link" :href="'list.jsp?email='+user.email+'&nickname='+user.nickname+'&sortType=mostSee'">最热榜单</a> 
									</ul>
								</li> 
								<li class="nav-item"><a class="nav-link" :href="'chat.jsp?email='+user.email+'&nickname='+user.nickname">人工智能</a></li>
							</ul>
							
							<ul class="nav navbar-nav navbar-right">
								<li class="nav-item">
								<button v-if="user.email!=''" class="tickets_btn" style="border:0px;">{{user.nickname}}</button>
								<button v-else @click="sign" class="tickets_btn" style="border:0px;">登录</button>
								</li>
							</ul>
						</div> 
					</div>
            	</nav>
            </div>
        </header>
	    <h1 class="agile_head text-center" style="margin-top:50px">{{movie.name}}</h1>
	    <div class="w3layouts_main wrap">
		    <div class="text-center">
		    	<h2 style="margin-top:50px;font-size:20px;color:white">为这部电影打分</h2>
			  	<div id="star" style="margin-top:25px"></div>
		    	<h2 style="font-size:20px;margin-top:30px;color:white">为这部电影评论</h2>
		    	<textarea v-model="view" placeholder="请输入评论……" required=""></textarea>
		  		<button @click="submit">提交</button>
			</div>
		</div>
	</div>
</body>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="layui/layui.js"></script>
 
 <%
        String nickname="\""+request.getParameter("nickname")+"\"";
        String email="\""+request.getParameter("email")+"\"";
		String m_name="\""+request.getParameter("m_name")+"\"";
		String m_id="\""+request.getParameter("m_id")+"\"";
        %>
        
<script src="js/jquery-3.2.1.min.js"></script>
        
<script>

var i=0;
layui.use('rate', function(){
    var rate = layui.rate;
    //渲染
    var ins1 = rate.render({
      elem: '#star',  //绑定元素
      value:0,
      half:true,
      theme: '#ffffff',
      choose: function(value){
    	    i=value;
    	  }
    });
    
});

	var vue=new Vue({
		el:'#mark',
		data:{
			user:{
				nickname:"",
				email:""
			},
			view:"",
			search:"",
			movie:{
				name:"",
				id:"",
				
			}
		},
		created:function(){
			
			this.user.email=<%=email%>;
			this.user.nickname=<%=nickname%>;
			this.movie.name=<%=m_name%>;
			this.movie.id=<%=m_id%>;
			
		},
		methods:{
			submit:function(){
				alert("ok");
				$.ajax({
					type:"POST",
					url:"http://27x31799n7.zicp.vipgiveScore/",
					data:{m_id:this.movie.id,
						email:this.user.email,
						rate:i,
						content:this.view
						},
					dataType:"JSON",
        			success:function(data){
        				alert("打分成功");
        				history.back(-1);
        			}
				})
			},
			guess:function(){
				window.location.href='guess.jsp?email='+this.user.email+'nickname='+this.user.nickname;
			}
		}
	})
</script>
</html>